angular.module('app.directives')

.directive('lineChart', ['$window', function($window) {
    return {
        restrict: 'EA',
        link: function($scope, element, attrs) {
            var myChart = echarts.init(element[0]);
            var title = attrs.title;
            $scope.$watch(attrs.eData, function(newValue, oldValue, scope) {
                var xData = [], yData = [], data = newValue;

                console.log("new Value:");
                console.log(data);
                console.log(title);

                angular.forEach(data.data, function(val) {
                    xData.push(val[0]);
                    yData.push(val[1]);
                });
                var option = {
                    title: {
                        text: title,
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: [{
                        show: true,
                        type: 'category',
                        data: xData,
                        axisLabel: {
                            show: false,
                            interval: 0
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    dataZoom: [{
                        type: 'inside'
                    }, {
                        type: 'slider',
                        show: false
                    }],
                    series: {
                        name: '指标数据',
                        type: 'line',
                        data: yData,
                        symbol: 'circle',
                        symbolSize: 1,
                        lineStyle: {
                            normal: {
                                color: '#9BCA63'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#9BCA63'
                            }
                        }
                    }
                };
                myChart.setOption(option);
            }, true);
            $window.onresize = function() {
                myChart.resize();
            }
        }
    }
}]);
